<template>
  <!-- 企业花名册 -->
  <div class="container">
    <!-- 顶部模块 -->
    <el-row class="topSection boxBorder">
      <el-row class="topBox">
        <div>
          <el-select
            :disabled="disabled"
            v-model="projectId"
            value-key="projectId"
            filterable
            placeholder="暂无关联项目"
            @change="changeProject"
          >
            <el-option
              v-for="(item, index) of projectList"
              :key="index"
              :label="item.name"
              :value="item.code"
              :title="item.name"
            ></el-option>
          </el-select>
        </div>
      </el-row>
    </el-row>
    <el-tabs
      v-model="activeName"
      type="card"
      @tab-click="handleClick"
      class="commonTab employeeTabs"
    >
      <el-tab-pane :disabled="disabled" label="项目工人名册" name="employee">
        <projectEmployeeList
          backPath="/home/employee/projectEmployeeQY"
          oldUrl="/home/employee/projectEmployeeQY"
          @func="getmsg($event)"
          v-if="showEmployeeList && (isMini !== 1 || miniRule.isRegister === 1)"
          :projectId="projectId"
          :projectName="projectName"
          :currentPage="currentPage"
          ref="employeeList"
          :fromType="fromType"
          :showHistory="true"
        ></projectEmployeeList>
        <attach-record
          backPath="/home/employee/projectEmployeeQY"
          oldUrl="/home/employee/projectEmployeeQY"
          v-if="showEmployeeList && isMini === 1 && miniRule.isRegister === 0"
          :projectId="projectId"
          :projectName="projectName"
          :currentPage="currentPage"
          :fromType="fromType"
          :showHistory="true"
        ></attach-record>
      </el-tab-pane>
      <el-tab-pane :disabled="disabled" label="班组管理" name="group">
        <projectGroupList
          v-if="showGroupManage"
          :projectItem="projectItem"
        ></projectGroupList>
      </el-tab-pane>
      <el-tab-pane :disabled="disabled" label="参建单位" name="company">
        <participationUnits
          v-if="showCompany"
          :projectId="projectId"
          :projectName="projectName"
          :isJS="isJS"
        ></participationUnits>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import projectEmployeeList from '@/components/employee/projectEmployeeList'
import participationUnits from '@/components/employee/participationUnits'
import projectGroupList from '@/components/employee/constructGroup'
import attachRecord from '@/components/smallProjectManage/attachRecord'
export default {
  name: 'projectEmployeeQY',
  components: {
    projectEmployeeList,
    participationUnits,
    projectGroupList,
    attachRecord,
  },
  data() {
    return {
      isMini: 0,
      miniRule: {},
      projectId: '',
      projectName: '',
      currentPage: '',
      // state: "STARTED", //项目状态code
      // stateName: "", //项目状态
      showEmployeeList: false,
      showGroupManage: false,
      showCompany: false,
      activeName: 'employee',
      projectList: [], //项目名称列表
      projectItem: '',
      disabled: false, //有引导页高亮时禁止点击
      fromType: 'projectEmployeeQY',
      isJS: false,
    }
  },
  async created() {
    if (localStorage.getItem('judgeRoleCode') === 'owner') {
      this.isJS = true
    } else {
      this.isJS = false
    }
    //有引导页高亮时禁止点击
    if (localStorage.getItem('isFirstUseEmployee') != 'false') {
      this.disabled = true
    }
    this.$store.state.activeMenu = '/home/employee/projectEmployeeQY'
    this.activeName = this.$route.query.activeName
      ? this.$route.query.activeName
      : 'employee'
    this.currentPage = this.$route.query.currentPage
    //获取项目列表
    await this.getProjectList()
    this.getMiniRule() //查询是否小项目与规则
  },
  mounted() {},
  methods: {
    //获取小项目规则
    getMiniRule() {
      this.axios({
        method: 'post',
        url: 'api-p/project/expand/findMiniProConfig',
        data: {
          projectId: this.projectId,
        },
      })
        .then((res) => {
          if (!res.data.hasError && res.data.result) {
            this.isMini = 1
            this.miniRule = res.data.result || {}
          } else {
            this.isMini = 0
          }
        })
        .catch((error) => {
          this.$message.error('查询失败')
        })
    },
    //子路由引导页完成禁用清空
    getmsg(data) {
      this.disabled = data
    },
    //tabs栏切换
    handleClick(tab, event) {
      if (tab.label == '项目工人名册') {
        this.showEmployeeList = true
      } else if (tab.label == '班组管理') {
        this.showGroupManage = true
      } else if (tab.label == '参建单位') {
        this.showCompany = true
      }
      // 切换时页面刷新
      this.showEmployeeList = false
      this.$nextTick(function () {
        this.showEmployeeList = true
      })
      this.showGroupManage = false
      this.$nextTick(function () {
        this.showGroupManage = true
      })
    },
    changeProject(val) {
      //解决从其他页面跳转过来后切换项目，uscc下拉框的值变为id的bug
      if (this.$route.query.uscc) {
        this.$route.query.uscc = ''
      }
      if (this.$route.query.groupId) {
        this.$route.query.groupId = ''
      }
      if (this.$route.query.isOnTheJob) {
        this.$route.query.isOnTheJob = ''
      }
      this.projectId = val
      this.getMiniRule()
      this.showEmployeeList = false
      this.$nextTick(function () {
        this.showEmployeeList = true
        this.$refs.employeeList.clearValue()
      })
      let obj = {}
      obj = this.projectList.find((item) => {
        return item.code === val
      })
      this.projectItem = obj
      this.projectName = this.projectItem.name
      this.showGroupManage = false
      this.$nextTick(function () {
        this.showGroupManage = true
      })
      this.showCompany = false
      this.$nextTick(function () {
        this.showCompany = true
      })
    },
    //获取项目列表
    getProjectList() {
      return this.axios({
        method: 'post',
        url: 'api-p/projectcompany/expand/current/projects',
        data: {
          sysAppCode: localStorage.getItem('judgeRoleCode'),
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              if (response.data.result.length === 0) {
                if (
                  localStorage.getItem('judgeRoleCode') === 'owner' ||
                  localStorage.getItem('judgeRoleCode') === 'constructor'
                ) {
                  return
                } else {
                  this.$alert('您还未加入项目请前往项目申请页面申报项目', '', {
                    confirmButtonText: '确定',
                    showClose: false,
                    confirmButtonClass: 'messageButColor',
                    callback: (action) => {
                      this.$router.push({
                        path: '/home/project/projectDeclareList',
                        name: 'projectDeclareList',
                        query: {
                          type: 'projectDeclareList',
                        },
                      })
                      this.$store.commit('CHANGE_SLIDER_NAME', {
                        oldUrl: '/home/project/projectDeclareList',
                        newUrl: this.$router.currentRoute.fullPath,
                      })
                    },
                  })
                }
              } else {
                this.projectList = response.data.result
                //从其他页面返回保证选中跳转之前的项目id
                if (this.$route.query.projectId) {
                  this.projectId = this.$route.query.projectId
                  this.projectList.map((item, index) => {
                    if (item.code === this.projectId) {
                      this.projectName = item.name
                    }
                  })
                } else {
                  this.projectId = response.data.result[0].code
                  this.projectName = response.data.result[0].name
                }

                let obj = {}
                var projectId = this.projectId
                obj = this.projectList.find((item) => {
                  return item.code === this.projectId
                })
                this.projectItem = obj

                this.showEmployeeList = false
                this.$nextTick(function () {
                  this.showEmployeeList = true
                })
              }
            } else {
              this.showEmployeeList = true
              this.$message.error('项目数据获取失败')
            }
          },
          (res) => {
            this.showEmployeeList = true
            this.$message.error('项目数据获取失败')
          }
        )
        .catch((error) => {
          this.showEmployeeList = true
          this.$message.error('项目数据获取失败')
        })
    },
    //是否隐藏花名册引导页
    // skipStep(){
    //     this.index ++ ;
    //     if(this.index > 5){
    //         localStorage.setItem("isFirstUseEmployee",false);
    //         this.isShowShade = false;
    //         return;
    //     }
    //     this.src= this.srcList[this.index];
    // },
  },
}
</script>
<style scoped lang="less">
.container {
  .topSection {
    background: #fff;
    border-radius: 4px 4px 0 0;
    padding: 16px 24px 16px 10px;
    .topBox {
      .projectState {
        display: inline-block;
        width: 60px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        color: #fff;
        text-align: center;
        margin-left: 10px;
        font-weight: normal;
        margin-top: 5px;
      }
      /deep/.el-input__inner {
        width: 346px;
        font-size: 24px;
        font-weight: bold;
        color: #333333;
        border: none;
        height: 30px;
        // background: #E4EBF1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      /deep/.el-select__caret {
        color: #333;
        font-size: 20px;
        line-height: 30px;
      }
    }
    /deep/.commonTab {
      margin-top: 21px;
    }
    /deep/.is-active {
      background: #fff;
    }
  }
  // 没有项目时的指引
  .shade {
    position: fixed;
    background: #eee;
    top: 63px;
    left: 230px;
    right: 0;
    bottom: 0;
    z-index: 10000;
    img {
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
  }
  .commonTab /deep/ .el-tabs__nav-scroll {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  //第一次进入花名册页面加引导页
  .guideBox {
    position: fixed;
    background: #eee;
    top: 105px;
    left: 230px;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background: #f5f7fa;
    div {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      overflow-y: auto;
      img {
        width: 100%;
        //    height: 100%;
      }
    }
  }
}
</style>
